<template>
  <div class='content'>
    <div class="header" >
      <img class="a" src="../assets/left.png" alt="">
      <p>乘车码</p>
      <img class="b"  @click="showTell()" src="../assets/serve.png" alt="">
        <van-popup class="popup showtell" v-model="isshowtell" round position="bottom" :style="{ height: '16%' }">
       
        <!-- 电话 -->
   <van-button @click="callPhone(12345)" type="primary"  class="photo"> <img src="../assets/tellicon.png" class="bgName" alt /><span >呼叫  （025）6738 2908</span></van-button>
   <van-button type="primary" @click='isshowtell=false'>取消</van-button>
      </van-popup>
    </div>
    <div class="tabs">
      <div class="tab" :class='{on:tabIndex==0}' @click='changeTab(0)' >
        <img src="../assets/metro_on.png" v-if='tabIndex==0' alt="">
        <img src="../assets/metro.png" v-else alt="">
        地铁
      </div>
    </div>
    <div class="info">
      <div class='tabBottom'>
        <span :class='{show:tabIndex==0}'><div></div></span>
      </div>
      <div v-if="!isUnlock">
        <img src="../assets/logo.png" alt="">
        <div class="notLogin" v-if='!isLogin'>
          <div class="icons">
            <div class='icon'>
              <img src="../assets/icon1.png" alt="">
              无需排队
            </div>
            <div class='icon'>
              <img src="../assets/icon2.png" alt="">
              先乘后付
            </div>
            <div class='icon'>
              <img src="../assets/icon3.png" alt="">
              无需带卡
            </div>
          </div>
          <van-button block :class='{on:checked}' is-link @click="showPopup">
            <p>
              开通钱包
            </p>
          </van-button>
          <p class="pp">使用乘车码服务需要开通我的南京钱包</p>
        </div>
      </div>
      <div class="qrcode" v-else>
        <img :src="qrcode" alt="">
        <div class="_info">
          <van-icon name="replay" />
          请点击乘车码刷新
        </div>
      </div>
    </div>
    <div class="twobtn">
      <van-button :disabled="disabled" @click='$router.push("/log")'><p>乘车记录</p></van-button>
      <b></b>
      <van-button :disabled="disabled" @click='$router.push("/busCode")'><p>更多服务</p></van-button>
    </div>
    <p class="foot">我的南京 X 银联 X 南京地铁</p>
  </div>
</template>

<script>
  import {getUserStatus} from "../api"
  export default {
    data() {
      return {
        show:false,
        checked:false,
        disabled:true,
        tabIndex: 0,
        isLogin: false,
        isUnlock:false,
        isKnow:false,
        isshowtell:false,
        name: localStorage.getItem("name"),
        idnumber: localStorage.getItem("idnumber"),
        date: `${new Date().getFullYear()}-${new Date().getMonth()+1}-${new Date().getDate()}`
      }
    },
    created () {
      
    },
    methods: {
       // 调用拨号功能
      callPhone (phoneNumber) {
      window.location.href = 'tel://' + phoneNumber
      },
      changeTab(index) {
        this.tabIndex = index
      },
      showPopup() {
        window.location.href = "https://wallet.pay.nj.gov.cn:8085/wallet/index.html#/personal/getIdCard?redirect= https://m.mynj.cn:11100/metrocode/dist/#/"
      },
      showText(){
        if(this.checked ==true ){
          this.show = true;
        }else{this.show = false;}
         
      },
      showTell(){
        this.isshowtell = true
      }
    },
  }
</script>

<style lang="scss" scoped>
.content{
  box-sizing: border-box;
  font-family: PingFangSC-Medium, PingFang SC;
  min-height:100vh;
  background: linear-gradient(137deg, #318BFF 0%, #1876FF 100%);
  padding:21px 17px 10px 17px;
  .header{
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    .showtell{
      font-size: 16px;
      background-color: transparent;
      padding:16px;
      font-weight: 500;
      button{
        display: block;
        border-radius: 10px;
        background-color: #fff;
        width:92%;
        color: #207CFF;
        padding:0 25px;
        img{
          width: 17px;
          height: 21px;
          margin-right: 13px;
        }
      }
      .photo{
        margin-bottom:16px;
        .van-button__content{
            justify-content: flex-start;
            .van-button__text{
               display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
            }
        }
        
      }
    }
    .a{
      width: 22px;
      height: 22px;
    }
    .b{
       width: 22px;
      height: 19px;
    }
    p{
      width: 54px;
      height: 25px;
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 250;
      color: #FFFFFF;
      line-height: 25px;
      margin: 0;
    }
  }
  .tabs{
    display: flex;
    justify-content: center;
    overflow: hidden;
    .tab{
      width:92px;
      height:34px;
      line-height: 34px;
      border-radius: 17px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-repeat: no-repeat;
      font-size: 18px;
      font-weight: 500;
      color: #fff;
      margin:0 10px;
      margin-top: 18px;
      &.on{
        background-color: #fff;
        color: #0064F4;
      }
      img{
        margin-right:8px;
        width:18px;
        height:18px;
      }
    }
  }
  .info{
    margin-top:23px;
    border-radius: 10px;
    background-color: #fff;
    box-sizing: border-box;
    width:100%;
    padding:33px 19px;
    position: relative;
    .tabBottom{
      margin:0 -19px;
      width: 100%;
      height:16px;
      position: absolute;
      top:0px;
      color: #fff;
      font-size: 60px;
      display: flex;
      justify-content: center;
      span{
        display: block;
        text-align: center;
        width:92px;
        margin:0 10px;
        display: flex;
        justify-items: center;
        align-items: center;
        opacity: 0;
        div{
          width:0;
          height:0;
          border:13px solid #fff;
          transform: translateX(32px) rotate(45deg);
        }
        &.show{
          opacity: 1;
        }
      }
    }
    .notLogin{
      text-align: center;
      .pp{
        color: red;

      }
      .icons{
        display:flex;
        justify-content: space-evenly;
        margin:15px 0;
        color: #333;
        font-size: 12px;
        font-weight: 400;
        .icon{
          display:flex;
          flex-flow: column;
          img{
            width:46px;
            height:46px;
            margin-bottom:5px;
          }
        }
      }
      .color{
        background: linear-gradient(137deg, #318BFF 0%, #1876FF 100%);
      }
      .power{
        p{
          width: 146.5px;
          height: 22.5px;
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 250;
          color: #333333;
          line-height: 22.5px;
          margin: 20px 114px 0 114.5px;
        }
        .power1{
          width: 351px;
          height: 119px;
          background: #F5F5F5;
          border-radius: 4px;
          margin: 23.5px 12px 0 12px;
          span{
            display: block;
            width: 317px;
            height: 87px;
            font-size: 15px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 200;
            color: #333333;
            line-height: 29px;
            padding: 14px 18px 17px 17px;
          }
        }
        .power2{
          display: flex;
          button{
          width: 169.5px;
          height: 45px;
          background: #FFFFFF;
          border-radius: 4px;
          border: 2px solid #E5E5E5;
          margin: 15px 10px;
          }
        }
      }
      button{
        width:208px;
        height: 44.5px;
        background: #FFFFFF;
        border-radius: 10px;
        border: 2px solid #0064F4;
        margin: 0 auto;
        p{
          width: 112px;
          height: 22.5px;
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 250;
          color: #0064F4;
          line-height: 22.5px;
        }
      }
    }
    .qrcode{
      display: flex;
      flex-flow: column;
      align-items: center;
      ._info{
        display: flex;
        align-items: center;
        font-size: 12px;
        font-weight: 400;
        color: #999;
        margin-top:16px;
        i{
          margin-right: 5px;
        }
      }
    }
  }
  .ticket{
    padding:15px 17px;
    background-color: #fff;
    border-radius: 10px;
    margin: 15px 0;
    .title{
      color: #999;
      font-size: 16px;
      font-weight: 500;
    }
    .item{
      background-repeat: no-repeat;
      background-size: 100% auto;
      height:58px;
      line-height: 58px;
      margin:5px 0;
      padding:0 17px;
      color: #fff;
      font-size: 15px;
      font-weight: 500;
      display: flex;
      justify-content: space-between;
      align-items: center;
      &.item1{
        background-image: url('../assets/item1.png');
      }
      &.item2{
        background-image: url('../assets/item2.png');
      }
      .right{
        height:25px;
        line-height: 25px;
        border-radius: 13px;
        border:1px solid #fff;
        padding:0 13px;
      }
    }
  }
  .twobtn {
    display: flex;
    margin-top: 15px;
    border-radius: 10px;
    width: 343px;
    height: 45px;
    background: #FFFFFF;
    b{
      margin-top: 12.5px;
      width: 1px;
      height: 20px;
      background: #959595;
      border-radius: 10px;
    }
    button{
       width: 171.5px;
       border: none;
       border-radius: 10px;  
        p{
          width: 64px;
          height: 22.5px;
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 250;
          color: #666666;
          line-height: 22.5px;
        }
    }
  }
  // &>button{
   
    // border-radius: 5px;
    // background-color: transparent;
    // border: 1px solid #FFF;
    // font-size: 16px;
    // font-weight: 500;
    // color: #FFF;
  // }
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
  .foot{
      width: 152px;
      height: 12px;
      font-size: 12px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 250;
      color: #FFFFFF;
      line-height: 12px;
      margin: 37px 95.5px 0 95.5px;
  
    }
  .block {
    width: calc(100vw - 32px);
    border-radius: 10px;
    height: calc(100vh - 60px);
    background-color: #fff;
    padding:0 17px;
    box-sizing: border-box;
    position: relative;
    .close{
      position: absolute;
      font-size: 24px;
      color: #999;
      top:10px;
      right: 10px;
    }
    .title{
      font-weight: 500;
      color: #333;
      font-size: 16px;
      margin-top:36px;
      text-align: center;
    }
    .detail{
      height:calc(100% - 130px);
      margin-top:10px;
      overflow: auto;
      &>div{
        text-indent: 2em;
        font-size: 12px;
        font-weight: 400;
        line-height: 23px;
        color: #333;
        &.b{
          text-indent: 0;
          font-weight: 500;
        }
      }
    }
    button{
      margin:10px 0;
    }
  }
}

</style>


 